<template>
  <div id="Room">
    <div class="address">
      <h3>宾馆管理 > 房间</h3>
    </div>
    <!-- 有数据才渲染 -->
    <div v-if="roomTypes && typeRooms"> 
      <div class="one-type"  v-for="(type,id) in roomTypes" :key="id">
        <h1>{{type.title}}</h1>
        <!-- 一种类型的房间 -->
        <!-- 可编辑 -->
        <div class="one-type-room" v-if="isEditOnID == id">
          <el-tag :key="room.rin" v-for="(room,id2) in typeRooms[id]" 
            closable :disable-transitions="false" 
            @close="handleClose(id,id2)">
            {{room.rin}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(id)"
            @blur="handleInputConfirm(id)"
          >
          </el-input>
          <el-button class="button-new-tag" size="small" @click="showInput(id)" v-else>
            <i class="el-icon-plus"></i>
          </el-button>
        </div>
        <!-- 不可编辑 -->
        <div class="one-type-room" v-else>
          <el-tag :key="room.rin" v-for="room in typeRooms[id]" 
            :closable="false" :disable-transitions="false" >
            {{room.rin}}
          </el-tag>
          <!-- 编辑框 -->
          <div class="edit">
            <div class="content" @click="toEdit(id)">
              <i class="el-icon-edit-outline"></i>
              编辑
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
  </div>
</template>

<script>
import { addOneRoom, deleteOneRoom } from '@/api/api'
import { showMessage } from '@/utils/utils'
import { mapGetters, mapActions, mapState } from "vuex";
import { roomTypeMixin } from '@/utils/mixins/roomType'
import { roomMixin } from '@/utils/mixins/room'
import { loadingMixin } from '@/utils/mixins/loading'
export default {
  mixins: [roomTypeMixin, loadingMixin, roomMixin],
  name:"Room",
  data() {
    return {
      typeRooms : undefined,  //按照类型分好类的房间 [[],[]]

      // 可编辑的row
      isEditOnID: -1,
      // typeRooms: [],

      // 输入框数据
      inputVisible: false,
      inputValue: '',
    }
  },
  methods: {
    //进入编辑
    toEdit(id) {
      this.inputVisible = false
      this.isEditOnID = id
    },
    // 删除标签
    handleClose(id, id2) {
      deleteOneRoom(this.typeRooms[id][id2].rin).then(response => {
        if(response.data === '删除成功！'){
          showMessage(this, '删除成功', 'success')
          this.typeRooms[id].splice(id2, 1)
        }
        this.$forceUpdate()
      }).catch(error => {
        showMessage(this, '删除失败', 'error')
      })
    },
    // 切换输入框
    showInput(id) {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput[0].focus()
      })
      
    },
    // 增加标签
    handleInputConfirm(id) {
      if(this.inputValue) {
        let obj = {rin : this.inputValue, tin : this.roomTypes[id].tin, rsin : 0}
        this.typeRooms[id].push(obj);
        addOneRoom({
          rin: this.inputValue, rsin: 0, tin: this.roomTypes[id].tin
        }).then(response => {
          if(response.data === '添加成功！'){
            showMessage(this,' 添加成功', 'success')
            this.inputVisible = false;
            this.inputValue = '';
          }
        }).catch(error => {
          showMessage(this, '失败', 'error')
        })
      }
    },
    // 数据加载及转换
    async load() {
      await this.updateRooms()
      await this.updateRoomType()
      this.typeRooms = new Array(this.roomTypes.length)
      for(let i = 0; i < this.typeRooms.length; i++) {
        this.typeRooms[i] = []
        for(let obj2 of this.rooms) {
          if(this.roomTypes[i].tin === obj2.tin) {
            obj2['canEdit'] = false
            this.typeRooms[i].push(obj2)
          }
        }
      }
    }
  },
}
</script>

<style lang="less" scoped>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
}
.apear{
  display: inline-block;
}
#Room{
  .one-type{
    background-color: #ffffff;
    h1{
      color: #aa97b0;
      // background-color: aqua;
      height: 4rem;
      padding-left: 20px;
      display: inline-flex;
      align-items: center;
    }
    .one-type-room{
      box-sizing: border-box;
      padding-left: 64px;
      // background-color: aqua;
      height: 50px;
      display: flex;
      align-items: center;
      .input-new-tag{
        width: 60px;
      }
      &:hover{
        background-color: #F5F7FA;
      }
      &:hover .edit{
        display: inline-block;
      }
      .el-tag{
        margin-right: 20px;
      }
      .edit{
        margin-left: 40px;
        color: #aa97b0;
        height: 32px;
        position: relative;
        top: 4px;
        &:hover{
          cursor: default;
        }
        display: none;
      }
    }
  }
}
</style>